<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据展示</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .layui-card {
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        
        .search-area {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-card">
            <div class="layui-card-header">数据展示</div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">路口数据</li>
                        <li>优化记录</li>
                        <li>AI分析历史</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!-- 路口数据表格 -->
                        <div class="layui-tab-item layui-show">
                            <!-- 搜索区域 -->
                            <div class="search-area">
                                <form class="layui-form layui-form-pane">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">关键词</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="keyword" placeholder="请输入关键词" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">时间范围</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" name="start_time" placeholder="开始时间" autocomplete="off" class="layui-input" id="start_time">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" name="end_time" placeholder="结束时间" autocomplete="off" class="layui-input" id="end_time">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">
                                                <i class="layui-icon layui-icon-search"></i> 搜索
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            
                            <!-- 数据表格 -->
                            <table class="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col width="150">
                                    <col width="150">
                                    <col>
                                    <col width="200">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>路口名称</th>
                                        <th>类型</th>
                                        <th>车道数</th>
                                        <th>位置</th>
                                        <th>录入时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1001</td>
                                        <td>解放路与中山路交叉口</td>
                                        <td>十字路口</td>
                                        <td>8</td>
                                        <td>市中心商业区</td>
                                        <td>2025-09-20 09:30</td>
                                    </tr>
                                    <tr>
                                        <td>1002</td>
                                        <td>人民路与建设路交叉口</td>
                                        <td>十字路口</td>
                                        <td>6</td>
                                        <td>住宅区</td>
                                        <td>2025-09-20 14:15</td>
                                    </tr>
                                    <tr>
                                        <td>1003</td>
                                        <td>朝阳路与光明路交叉口</td>
                                        <td>T字路口</td>
                                        <td>4</td>
                                        <td>工业区</td>
                                        <td>2025-09-21 10:45</td>
                                    </tr>
                                    <tr>
                                        <td>1004</td>
                                        <td>黄河路与长江路交叉口</td>
                                        <td>十字路口</td>
                                        <td>8</td>
                                        <td>教育区</td>
                                        <td>2025-09-21 16:20</td>
                                    </tr>
                                    <tr>
                                        <td>1005</td>
                                        <td>南京路与北京路交叉口</td>
                                        <td>环岛路口</td>
                                        <td>6</td>
                                        <td>商业区</td>
                                        <td>2025-09-22 11:30</td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <!-- 分页 -->
                            <div id="page"></div>
                        </div>
                        
                        <!-- 优化记录表格 -->
                        <div class="layui-tab-item">
                            <table class="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                    <col width="150">
                                    <col width="200">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>优化日期</th>
                                        <th>优化内容</th>
                                        <th>优化人员</th>
                                        <th>录入时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2001</td>
                                        <td>2025-09-18</td>
                                        <td>调整解放路与中山路交叉口信号配时</td>
                                        <td>张三</td>
                                        <td>2025-09-18 15:30</td>
                                    </tr>
                                    <tr>
                                        <td>2002</td>
                                        <td>2025-09-19</td>
                                        <td>优化人民路与建设路交叉口左转相位</td>
                                        <td>李四</td>
                                        <td>2025-09-19 10:45</td>
                                    </tr>
                                    <tr>
                                        <td>2003</td>
                                        <td>2025-09-20</td>
                                        <td>新增朝阳路与光明路交叉口早晚高峰专用相位</td>
                                        <td>王五</td>
                                        <td>2025-09-20 16:20</td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <!-- 分页 -->
                            <div id="page2"></div>
                        </div>
                        
                        <!-- AI分析历史表格 -->
                        <div class="layui-tab-item">
                            <table class="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                    <col width="150">
                                    <col width="200">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>分析时间</th>
                                        <th>分析对象</th>
                                        <th>结果状态</th>
                                        <th>完成时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>3001</td>
                                        <td>2025-09-18</td>
                                        <td>解放路与中山路交叉口</td>
                                        <td>已完成</td>
                                        <td>2025-09-18 16:45</td>
                                    </tr>
                                    <tr>
                                        <td>3002</td>
                                        <td>2025-09-19</td>
                                        <td>人民路与建设路交叉口</td>
                                        <td>已完成</td>
                                        <td>2025-09-19 14:20</td>
                                    </tr>
                                    <tr>
                                        <td>3003</td>
                                        <td>2025-09-20</td>
                                        <td>朝阳路与光明路交叉口</td>
                                        <td>已完成</td>
                                        <td>2025-09-20 17:30</td>
                                    </tr>
                                    <tr>
                                        <td>3004</td>
                                        <td>2025-09-22</td>
                                        <td>黄河路与长江路交叉口</td>
                                        <td>分析中</td>
                                        <td>-</td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <!-- 分页 -->
                            <div id="page3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['element', 'form', 'laydate', 'laypage'], function(){
            var element = layui.element;
            var form = layui.form;
            var laydate = layui.laydate;
            var laypage = layui.laypage;
            
            // 日期选择器
            laydate.render({
                elem: '#start_time'
            });
            
            laydate.render({
                elem: '#end_time'
            });
            
            // 分页
            laypage.render({
                elem: 'page',
                count: 50,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function(obj){
                    console.log(obj);
                }
            });
            
            // 搜索表单提交
            form.on('submit(search)', function(data){
                layer.msg('搜索功能已触发');
                return false;
            });
        });
    </script>
</body>
</html>